<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<link rel="stylesheet" href="css/menu.css" type="text/css" />
		<title>HANDY GROUPWARE</title>		
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>		
		<script>
			if(window.console == undefined){
				console = {log : function(){}};
			}
		</script>
		<script>	
		var more_flag = false;	
		 var first_page = 1;
		$(document).ready(function(){	
			var header_w = $("#header").width();
			var logo_w = 220;
			var menu_length = $(".menu li").length;
			var menu_w = $(".menu li").width();	//82	
			var more_w = $(".menu_more").width(); //84
			var info_w = $(".info_area").width()-$(".menu_more").width();
			var all_menu_w = menu_length * menu_w;						
							
			var box_w = header_w - logo_w - info_w;
			var box_min_w = menu_w * 7;
			var n = Math.floor(box_w / menu_w);
			var left_n = Math.floor(menu_w * n);
			
			
			console.log("[ready] info_w : "+info_w + ", box_w : "+box_w + ", all_menu_w : "+all_menu_w + ",n : "+n +",left_n : "+left_n);
			if(box_w > all_menu_w){ 				
				$(".menu_more").css("display","none");
				$(".menu_area").width(left_n);
				more_flag = true;
			} else {
				info_w = $(".menu_more").outerWidth() + $(".menu_link").outerWidth() + $(".user_area").outerWidth();												
				box_w = header_w - logo_w - info_w;
				n = Math.floor(box_w / menu_w);
				left_n = Math.floor(menu_w * n);
				$(".menu_more").css("display","block");
				
				if(box_w < box_min_w){
						$(".menu_area").width(box_min_w);	
						console.log("box_w가 min_width값보다 작아서 min_width값을 넣는다. box_min_w : "+box_min_w);
					} else{
						$(".menu_area").width(left_n);
						console.log("box_w에 left_n 값을 넣는다. left_n : "+left_n);
					}				
			}						
		});	
		
			$(window).bind('resize', function(){

				var header_w = $("#header").width();
				var logo_w = 220;
				var menu_length = $(".menu li").length;
				var menu_w = $(".menu li").width();	//82	
				var more_w = $(".menu_more").width(); //84
				var info_w = $(".info_area").width()-$(".menu_more").width();
				var all_menu_w = menu_length * menu_w;						
								
				var box_w = header_w - logo_w - info_w;
				var box_min_w = menu_w * 7;
				var n = Math.floor(box_w / menu_w);
				var left_n = Math.floor(menu_w * n);
								
						
				if(box_w >= all_menu_w){								
					$(".menu_more").css("display","none");
					$(".menu_area").width(left_n);
					more_flag = true;		
					console.log("00000000 first_page : "+first_page);			
					allmenu_open();
					console.log("11111111 first_page : "+first_page);
				} else {
							
					info_w = $(".menu_more").outerWidth() + $(".menu_link").outerWidth() + $(".user_area").outerWidth();
					//$(".info_area").width(info_w);									
					box_w = header_w - logo_w - info_w;
					n = Math.floor(box_w / menu_w);
					left_n = Math.floor(menu_w * n);
					$(".menu_more").css("display","block");
						
					if(box_w < box_min_w){
						$(".menu_area").width(box_min_w);
						console.log(" first_page : "+first_page);	
						//console.log("box_w가 min_width값보다 작아서 min_width값을 넣는다. box_min_w : "+box_min_w);
					} else{
						$(".menu_area").width(left_n);
						//console.log("box_w에 left_n 값을 넣는다. left_n : "+left_n);
						console.log(" first_page : "+first_page);
					}					
				}	
								
				//console.log("[     header - 220  : "+(header_w-220) +   " ,     info_w  : " + info_w  +   " ,     box_w  : "+box_w +   " ,     box_w  : "+box_w +"      ]");
							
			}); 
		
			function allmenu_open(){
						
				$itemsBox = $('.menu');
				
				$(".menu_more").removeClass("more_right");	
				first_page = 1;
				console.log("[ allmenu_open ] first_page : "+first_page);
				
				$itemsBox.animate(
					{'top' : '0' }
					,10
					,function(){						
					}			
					
				);
				
			}
			 
			 
			
			 function moremenu_open(){
						
				var menu_h = $(".menu li").height();				
				$itemsBox = $('.menu');
				
				if(first_page == 0){	
					console.log("=====if======== first_page : "+first_page);						
					$(".menu_more").removeClass("more_right");								
				} else {						
					console.log("=else========== first_page : "+first_page);			
					$(".menu_more").addClass("more_right");																						
				}
				
				$itemsBox.animate(
					{'top' : '-' + menu_h * first_page + 'px' }
					,300
					,function(){											
					}			
				);
				first_page = first_page == 0 ? 1:0;
				console.log("=end========== first_page : "+first_page);
				
			}
		</script>		
	</head>
	<body>	
		<div id="wrap_menu">
				
			<div id="header">
				<h1>
					<a href=""><img src="images/top_menu/smartoffice.png" alt="HANDY Groupware" width="175" height="37"></a>
				</h1>
			
			<div class="nav_area">				
				<div class="menu_area">
					<ul id="normal_menu" class="menu">
						<li class="menu_mail"><a id="menu_0" href="">메일</a></li>
						<li class="menu_board"><a id="menu_1" href="">게시판</a></li>
						<li class="menu_work"><a id="menu_2" href="">업무넷</a></li>						
						<li class="menu_documentflow"><a id="menu_3" href="">결재</a></li>
						<li class="menu_document"><a id="menu_4" href="">문서함</a></li>
						<li class="menu_calendar"><a id="menu_5" href="">일정</a></li>
						<li class="menu_equipment"><a id="menu_6" href="">설비예약</a></li>
						<li class="menu_cloud"><a id="menu_7" href="">클라우드</a></li>
						<li class="menu_contact"><a id="menu_8" href="">주소록</a></li>
						<li class="menu_search"><a id="menu_9" href="">설문</a></li>			
						<li class="menu_club"><a id="menu_10" href="">동호회</a></li>		
						<li class="menu_meeting"><a id="menu_11" href="">회의</a></li>				
					</ul>
				</div>
						
				<div class="info_area">
					<div class="menu_more">
						<a href="javascript:moremenu_open()"> </a>							
					</div>
					<div class="menu_link">
						<a href="#"> </a>							
					</div>
					<div class="user_area">
						<p class="user_dept">전략마케팅</p>
						<p class="user_name">엄유정(주임 연구원)</p>
						<div class="gnb">
							<ul>
								<li><a href="" class="config"><img src="images/top_menu/gnb_configuration.png" alt="환경설정"></a></li>
								<li><a href="" class="logout" title=""><img src="images/top_menu/gnb_logout.png" alt="로그아웃"></a></li>
							</ul>
						</div>											
					</div>												
				</div>					
			</div>
			</div>			
		</div>			
	</body>
</html>

